<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>钟馗</title>
</head>
<body>
<div class="container">
    <div class="card  " style="margin-top: 10px">
        <div class="card-body">
            <h5 class="card-title">钟馗校验测试</h5>
            <div class="card requiretest m-2">
                <div class="card-body">
                    <h5 class="card-title">必填校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check({"{param:'param',type:'require',code:500,min:2,max:5,msg:{min:'长度不足',max:'超长了',null:'不可为空'}}"})
                        </code>
                    </h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数</label>

                            <input type="text"   name="editType"  value="save"
                                   placeholder="请输入值" style="display: none">
                            <input type="email" class="form-control" name="param" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card datetest m-2">
                <div class="card-body">
                    <h5 class="card-title">日期校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check(value = {"{param:'startTime',require:true,type:'date',fmt:'yyyy-MM-dd',code:500,after:0,msg:'日期不合法'}"})
                        </code>
                    </h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数</label>
                            <input type="email" class="form-control" name="startTime" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card phonetest m-2">
                <div class="card-body">
                    <h5 class="card-title">手机号校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check({"{param:'param',type:'phone',code:500,min:2,max:5,msg:{error:'格式不正确',null:'不可为空'}}"})
                        </code>
                    </h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数</label>
                            <input type="email" class="form-control" name="param" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card numbertest m-2">
                <div class="card-body">
                    <h5 class="card-title">数字校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check({"{param:'param',type:'double',code:500,min:10,max:20,msg:{min:'不可小于10',max:'不可大于20',fail:'数字不合法',null:'不可为空'}}"})
                        </code></h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数</label>
                            <input type="email" class="form-control" name="param" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card avttest m-2">
                <div class="card-body">
                    <h5 class="card-title">参数关联校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check({"{condition:'str.isNotEmpty(a)',rule:'long(a)>long(b)',msg:{fail:'校验不通过',error:'数字格式不正确'},code:500}"})
                        </code>
                    </h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数a</label>
                            <input type="email" class="form-control" name="a" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <div class="form-group">
                            <label>参数b</label>
                            <input type="email" class="form-control" name="b" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card avttest1 m-2">
                <div class="card-body">
                    <h5 class="card-title">参数关联校验1</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check({"{rule:'str.isEmpty(a)?str.isNotEmpty(b):true',msg:{fail:'a为空字符串b不可为空',error:'校验失败'},code:500}"})
                        </code>
                    </h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数a</label>
                            <input type="email" class="form-control" name="a" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <div class="form-group">
                            <label>参数b</label>
                            <input type="email" class="form-control" name="b" aria-describedby="emailHelp"
                                   placeholder="请输入值">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card ratelimiter m-2">
                <div class="card-body">
                    <h5 class="card-title">流控校验（静态）</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code> @Check(rateLimters = {"{rate:1,msg:'您手速太快了,请稍后再试',code:500}"})
                        </code>
                    </h6>
                    <label>点击测试按钮触发流控,再次点击终止</label>
                    <form onsubmit="javascript:return false;">
                        <button class="btn btn-outline-dark text-success" type="button">
                            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                            <span class="sr-only"></span>测试
                        </button>
                        <div class="form-group">
                            <label>每秒次数</label>
                            <input type="number" class="form-control" name="rate" aria-describedby="emailHelp"
                                   placeholder="请输入值" value="2">
                        </div>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card ratelimiter_dy m-2">
                <div class="card-body">
                    <h5 class="card-title">流控校验（动态）</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code> @Check(rateLimters = {"{rate:1,model:'dynamic',param:'a',msg:'您手速太快了,请稍后再试',code:500}"})
                        </code>
                    </h6>
                    <label>点击测试按钮触发流控,再次点击终止,当参数命中流控后会自动修改新值</label>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数a</label>
                            <input type="text" class="form-control" name="a" aria-describedby="emailHelp"
                                   placeholder="请输入值" value="0">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button class="btn btn-outline-dark text-success" type="button">
                            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                            <span class="sr-only"></span>测试
                        </button>
                        <div class="form-group">
                            <label>每秒次数</label>
                            <input type="number" class="form-control" name="rate" aria-describedby="emailHelp"
                                   placeholder="请输入值" value="2">
                        </div>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="card ratelimiter_dy_create m-2">
                <div class="card-body">
                    <h5 class="card-title">流控校验（动态令牌桶生成速率流控）</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code> @Check(rateLimters =
                            {"{rate:100,createRate:1,model:'dynamic',param:'a',msg:'用户量激增，流控命中',code:500}"})
                        </code>
                    </h6>
                    <label>点击测试按钮触发流控,每秒钟只能允许一个新值,再次点击终止</label>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数a</label>
                            <input type="text" class="form-control" name="a" aria-describedby="emailHelp"
                                   placeholder="请输入值" value="0">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button class="btn btn-outline-dark text-success" type="button">
                            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                            <span class="sr-only"></span>测试
                        </button>
                        <div class="form-group">
                            <label>每秒次数</label>
                            <input type="number" class="form-control" name="rate" aria-describedby="emailHelp"
                                   placeholder="请输入值" value="4">
                        </div>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>

                    </form>
                </div>
            </div>
            <div class="alert alert-warning" role="alert">
                需要进行复杂校验的时候可以使用，比如嵌套类型的数据
            </div>
            <div class="card complextest m-2">
                <div class="card-body">
                    <h5 class="card-title">json字符串校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check(rules =
                            "[{param:'userinfo',type:'(json)',msg:{error:'json格式不正确',null:'用户不可为空'},code:'500',rules:[{param:'username',type:'require',code:500,min:2,max:5,msg:{min:'用户名称太短',max:'用户名称太长',null:'不可为空'}}]}]")
                        </code>
                    </h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数</label>
                            <textarea class="form-control" name="param">{username:'jason',age:18,phone:{type:'iphone',name:'iphone7'}} </textarea>
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>
                    </form>
                </div>
            </div>
            <div class="alert alert-warning" role="alert">
                需要校验json数组类型入参的时候可以使用如下方式
            </div>
            <div class="card arraytest m-2">
                <div class="card-body">
                    <h5 class="card-title">json数组校验</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <code>
                            @Check(rules =
                            "[{param:'param',type:'[json]',min:1,max:5,code:'500',msg:{min:'数组长度不足',max:'超长了',null:'数组不可为空'},
                            rules:[{param:'a',type:'require',min:2,max:5,msg:{min:'长度不足',max:'超长了',null:'不可为空'},code:500}]}]")
                        </code></h6>
                    <form onsubmit="javascript:return false;">
                        <div class="form-group">
                            <label>参数</label>
                            <input type="text" class="form-control" name="param" aria-describedby="emailHelp"
                                   placeholder="请输入值" value="[{a:'abcd',b:2,c:'e'}]">
                            <small class="form-text text-muted">输入之后点击测试按钮</small>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm">测试</button>
                        <div class="form-group">
                            <label>执行结果</label>
                            <textarea class="form-control message" rows="3"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>
